<template>
  <div class="ChildPage TablePage" v-loading="loading">
    <vb-page ref="page">
      <template #headerSearch-append="scope">

        <div>
          <span style="font-size: 12px; padding-right: 4px; color: #666666">物料</span>
          <el-select filterable remote :remote-method="e => getMaterialList(e)" v-model="scope.searchForm.materialNo" size="small" clearable class="material" placeholder="请输入物料编码或者名称" style="margin-right: 10px">
            <el-option v-for="item in materialList" :key="item.fNumber" :label="item.fNumber + '：' + item.fName + ' ' + item.fSpecification" :value="item.fNumber" />
          </el-select>
        </div>

      </template>

    </vb-page>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reloadMaterial: false,
      materialList: [],
      dataList: [],
    }
  },
  async mounted() {

  },
  methods: {


    async getMaterialList(val) {
      if (!val) {
        this.materialList = []
        return
      }
      this.materialLoading = true
      try {
        const res = await this.callApi('get_material_by_key', { key: val, pageSize: 20 })
        if (!res.res) return
        this.materialList = res.data
      } finally {
        this.materialLoading = false
      }
    },

  }
}
</script>

<style scoped>
</style>
